<template>
  <div class="">
    <a-modal
      v-model:visible="visible"
      :title="dialogTitle"
      :ok-loading="btnLoading"
      :modal-style="modalStyle"
      :body-style="bodyStyle"
      :mask-closable="false"
      @cancel="dialogCancel"
      @before-ok="dialogBeforeOk"
    >
      <DetailForm
        ref="detailFormRef"
        :categoryDatas="categoryDatas"
        @saveCallback="saveCallback()"
      />
    </a-modal>
  </div>
</template>

<script setup>
  import { ref } from 'vue';

  import useVisible from '@/hooks/visible';
  import DetailForm from './form.vue';

  const props = defineProps({
    visible: {
      type: Boolean,
      default: false,
    },
    title: {
      type: String,
      default: '',
    },
    id: {
      type: [Number, String],
      default: '',
    },
    categoryDatas: {
      type: Array,
      default() {
        return [];
      },
    },
  });
  const emit = defineEmits(['saveCallback']);

  const modalStyle = {
    width: '60%',
    height: '80%',
  };
  const bodyStyle = {
    height: 'calc(100% - 108px)',
    overflow: 'auto',
  };

  const { visible, setVisible } = useVisible(false);
  const dialogTitle = ref();
  const btnLoading = ref(false);
  const detailFormRef = ref();

  const fetchData = async (row = {}) => {
    setVisible(true);
    dialogTitle.value = '新增';
    if (row.id) {
      dialogTitle.value = `编辑ID: ${row.id}`;
    }
    detailFormRef.value.fetchData(row, props);
  };
  const saveCallback = () => {
    emit('saveCallback');
  };

  const dialogCancel = () => {
    setVisible(false);
  };
  const dialogBeforeOk = (done) => {
    detailFormRef.value.submit(done);
  };

  // 暴露方法【给父级调用】
  defineExpose({
    fetchData,
  });
</script>

<style scoped lang="less">

</style>
